<!--
 * @Description: 伸缩表格
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-04-14 15:13:48
 * @LastEditTime: 2023-05-10 14:46:47
 * @FilePath: \cscec-pms-admin\src\views\project\projectMonthlyReport\components\FlexTable.vue
-->
<template>
  <a-card>
    <div class="title-wrapper">
      <title-name :title="option.title" />
      <a-icon
        :type="option.flex ? 'up' : 'down'"
        @click="handleFlex('oneself',!option.flex)"
      />
      <a-icon
        class="title-icon"
        type="double-left"
        @click="handleFlex('all', false)"
      />
      <a-icon
        class="title-icon"
        type="double-right"
        @click="handleFlex('all',true)"
      />
    </div>
    <div
      class="flex-table-wrapper"
      ref="flexTableWrapper"
      :style="{height: option.flex ? (height === null ? 'auto' : height+ 'px') : 0}"
    >
      <ux-grid
        ref="flexTable"
        row-id="id"
        show-header-overflow
        :show-overflow="'tooltip'"
        border
        :max-height="500"
        :merge-cells="mergeCells"
      >
        <ux-table-column
          v-for="item in option.columns"
          :key="item.dataIndex"
          :field="item.dataIndex"
          :title="item.title"
          :width="item.width"
          :type="item.title === '序号'?'index':''"
          align="center"
        >
          <template v-if="item.hasOwnProperty('children') && item.children.length > 0">
            <ux-table-column
              v-for="el in item.children"
              :key="el.dataIndex"
              :field="el.dataIndex"
              :title="el.title"
              :width="item.width"
              align="center"
            />
          </template>
        </ux-table-column>
      </ux-grid>
    </div>
  </a-card>
</template>
<script>
import { UxGrid, UxTableColumn } from 'umy-ui'
export default {
  name: 'FlexTable' + Date.now(),
  props: {
    // 表格配置
    option: {
      type: Object,
      default: () => {}
    },
    // 表格合并项
    mergeCells: {
      type: Array,
      default: () => []
    },
    // 表格索引
    index: {
      type: Number,
      default: null
    }
  },
  components: {
    UxGrid,
    UxTableColumn
  },
  data() {
    return {
      // 表格实际高度
      height: null
    }
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    /**
     * @description: 获取表格高度
     * @return {void}
     */
    getHeight() {
      this.height = this.$refs.flexTableWrapper.firstChild.clientHeight
    },
    /**
     * @description: 伸缩表格伸缩事件
     * @param {string} type 事件类型(oneself:自己,all:全部)
     * @param {boolean} value true:展开,false：收起
     * @return {void}
     */
    handleFlex(type, value) {
      this.$emit('flex', this.index, type, value)
    },
    /**
     * @description: 加载数据
     * @param {array} data 接口数据
     * @return {void}
     */
    reloadData(data) {
      this.$refs.flexTable.reloadData(data).then(() => {
        this.getHeight()
      })
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      const colObj = this.option.columns[columnIndex]
      const rowObj = this.data[rowIndex]
      if (colObj.hasOwnProperty('customRender') && colObj.title !== '序号') {
        return {
          rowspan: rowObj[colObj.dataIndex + 'RowSpan'],
          colspan: 1
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }
  .title-icon {
    transform: rotate(90deg);
  }
}
.flex-table-wrapper{
  transition: height 0.5s ease;
  overflow: hidden;
}
</style>
